<template>
  <div class="box">
    <div class="login-box">
      <el-form>
        <div class="radio">
          <el-radio-group v-model="radio" fill="#26BB9C">
            <el-radio-button label="用户登录"></el-radio-button>
            <el-radio-button label="手机登录"></el-radio-button>
          </el-radio-group>
        </div>
        <el-form-item class="input">
          <el-input placeholder="请输入用户名" v-model="userName" clearable></el-input>
        </el-form-item>
        <el-form-item class="input">
          <el-input placeholder="请输入密码" v-model="password" show-password></el-input>
        </el-form-item>
        <div class="text">
          <a href="" @click="rClick">还未注册?去注册</a>
          <a href="/forget">忘记密码</a>
        </div>
        <el-form-item class="loginBtn">
          <el-button class="btn" @click="reg">登录</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<script>
export default {
  name: 'login',
  data() {
    return {
      userName: '',
      password: '',
      radio: '用户登录',
    };
  },
  methods: {
    reg() {
      this.$message({
        message: '登录成功',
        type: 'success',
        offset: 400,
        center: true,
        duration: 1000,
      });
    },
    rClick() {
      this.$router.push('/register').catch(() => {});
    },
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  position: relative;
}
.login-box {
  position: absolute;
  width: 600px;
  height: 500px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  background-color: #fff;
  border-radius: 10px;
}
.text {
  text-align: center;
}
.input {
  margin-left: 180px;
  margin-right: 180px;
  text-align: center;
}
a {
  font-size: 10px;
  margin: 0 15px;
}
.radio {
  text-align: center;
  padding: 40px;
}
.loginBtn {
  margin: 10px;
  padding: 10px;
  text-align: center;
}
.btn {
  width: 240px;
  border-radius: 5px;
  background-color: #26BB9C;
  color: #fff;
}
</style>
